/* Cruciverba — "Edizione del giorno": carta avorio, inchiostro, un solo accento vermiglione.
   Titoli in Bodoni (tipografo di Parma), interfaccia in Libre Franklin. Font ospitati in fonts/ (CSP). */

@font-face {
    font-family: 'Bodoni Moda';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/bodoni-moda.woff2') format('woff2');
}
@font-face {
    font-family: 'Bodoni Moda';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/bodoni-moda-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/libre-franklin.woff2') format('woff2');
}

:root {
    --paper: #f4efe4;
    --surface: #fffdf8;
    --ink: #16140f;
    --ink-2: #3f3b33;
    --muted: #7b7568;
    --line: #e2dac8;
    --line-2: #cfc5b0;
    --accent: #d2361e;
    --accent-ink: #a52812;
    --accent-soft: #fbe6de;
    --mark: #ffd84a;
    --mark-soft: #fff0b3;
    --ok: #e3edd6;
    --ok-ink: #3e6a2a;
    --ko: #f7d3c9;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 1px 0 rgba(22, 20, 15, 0.05), 0 18px 40px -22px rgba(22, 20, 15, 0.35);
    --shadow-lift: 0 2px 0 rgba(22, 20, 15, 0.06), 0 22px 50px -20px rgba(22, 20, 15, 0.45);
    --font-display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
    --font-ui: 'Libre Franklin', 'Franklin Gothic Medium', 'Helvetica Neue', sans-serif;
    --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background-color: var(--paper);
    /* Trama leggera a quadretti, come un foglio di schemi, che sfuma verso il basso */
    background-image:
        radial-gradient(1200px 520px at 50% -120px, rgba(255, 253, 248, 0.95), rgba(244, 239, 228, 0) 70%),
        linear-gradient(rgba(22, 20, 15, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 20, 15, 0.045) 1px, transparent 1px);
    background-size: 100% 100%, 36px 36px, 36px 36px;
    background-attachment: fixed;
    min-height: 100vh;
}

::selection { background: var(--mark); color: var(--ink); }

#app {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 24px 40px;
    /* App installata: niente sotto la tacca o la barra Home (viewport-fit=cover) */
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* ---------- Testata ---------- */

.masthead {
    text-align: center;
    margin-bottom: 30px;
}

.masthead-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--ink);
    box-shadow: 0 3px 0 -2px var(--ink);   /* doppio filetto */
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
    animation: fade 0.7s var(--ease-out) both;
}

#issue-date:first-letter { text-transform: uppercase; }

.masthead-right { display: flex; align-items: center; gap: 14px; }

button.help-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    border-color: var(--ink);
    background: var(--surface);
    color: var(--ink);
    font-size: 1em;
    letter-spacing: 0.08em;
}
button.help-btn:hover { background: var(--ink); color: #fff; }
.help-mark {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15em;
    letter-spacing: 0;
}

/* ---------- App installabile ---------- */

button.install-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
    font-size: 1em;
    letter-spacing: 0.08em;
}
button.install-btn[hidden] { display: none; }
.install-short { display: none; }
button.install-btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.install-mark {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0;
}

.app-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 12px 10px 18px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
    animation: rise 0.5s var(--ease-out) both;
}
.app-banner[hidden] { display: none; }
.app-banner.offline { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); padding: 12px 18px; }
button.app-banner-action {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
button.app-banner-action:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

/* App aperta dall'icona: niente lampeggio al tocco ne rimbalzo della pagina */
body.standalone { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }

button.link {
    height: auto;
    /* Area di tocco di 40px senza spostare il testo intorno */
    padding: 11px 2px;
    margin: -11px 0;
    border: none;
    background: none;
    color: var(--accent-ink);
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
button.link:hover { background: none; color: var(--accent); }

.title {
    display: inline-flex;
    margin: 0 auto;
    line-height: 1;
}

.title-cell {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: clamp(30px, 6.6vw, 74px);
    aspect-ratio: 1;
    margin-left: -2px;
    border: 2px solid var(--ink);
    background: var(--surface);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(20px, 4.6vw, 52px);
    color: var(--ink);
    animation: drop 0.7s var(--ease-out) both;
    transition: color 0.2s, background 0.2s;
}
.title-cell:first-child { margin-left: 0; }
.title-cell.black { background: var(--ink); }
.title-cell sup {
    position: absolute;
    top: 3px;
    left: 5px;
    font-family: var(--font-ui);
    font-size: clamp(7px, 1.1vw, 12px);
    font-weight: 700;
    color: var(--ink-2);
}
.title-cell:not(.black):hover { color: var(--accent); background: var(--mark-soft); }
.title-cell:nth-child(1) { animation-delay: 0.05s; }
.title-cell:nth-child(2) { animation-delay: 0.1s; }
.title-cell:nth-child(3) { animation-delay: 0.15s; }
.title-cell:nth-child(4) { animation-delay: 0.2s; }
.title-cell:nth-child(5) { animation-delay: 0.25s; }
.title-cell:nth-child(6) { animation-delay: 0.3s; }
.title-cell:nth-child(7) { animation-delay: 0.35s; }
.title-cell:nth-child(8) { animation-delay: 0.4s; }
.title-cell:nth-child(9) { animation-delay: 0.45s; }
.title-cell:nth-child(10) { animation-delay: 0.5s; }
.title-cell:nth-child(11) { animation-delay: 0.55s; }

.tagline {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: clamp(1.05em, 2.2vw, 1.35em);
    color: var(--ink-2);
    animation: fade 0.8s 0.5s var(--ease-out) both;
}
.tagline em { color: var(--accent); }

/* ---------- Schede ---------- */

#controls, .drawer, #clues-container, .sheet {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

#controls {
    padding: 22px 24px 18px;
    margin-bottom: 16px;
    animation: rise 0.7s 0.25s var(--ease-out) both;
}

.card-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: 1.45em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card-kicker {
    font-family: var(--font-ui);
    font-size: 0.62em;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--accent);
}

.controls-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
    align-items: end;
}

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.field > label, .field-row label {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.hint { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--muted); }

select, input[type="number"], input[type="text"], textarea {
    width: 100%;
    font: inherit;
    font-size: 0.98em;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line-2);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
select, input[type="number"], input[type="text"] { height: 46px; padding: 0 14px; }
select {
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316140f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}
textarea {
    padding: 12px 14px;
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.55;
    resize: vertical;
}
select:hover, input:hover, textarea:hover { border-color: var(--muted); }
select:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(210, 54, 30, 0.18);
}
select:disabled, input:disabled { opacity: 0.45; cursor: not-allowed; }

.field-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.field-row[hidden] { display: none; }
.field-row input { width: 72px; height: 40px; padding: 0 10px; }

.range-row { display: flex; align-items: center; gap: 12px; height: 46px; }
#black-ratio { flex: 1; min-width: 0; accent-color: var(--accent); height: 28px; cursor: pointer; }
#black-ratio-label {
    min-width: 52px;
    padding: 5px 0;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
}

/* ---------- Pulsanti ---------- */

button {
    font: inherit;
    font-weight: 650;
    font-size: 0.9em;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--ink);
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s var(--ease-out), box-shadow 0.15s;
}
button:hover { background: var(--ink-2); border-color: var(--ink-2); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid rgba(210, 54, 30, 0.45); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

button.primary {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 10px 22px -12px rgba(210, 54, 30, 0.9);
}
button.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); transform: translateY(-1px); }

#btn-generate { height: 46px; padding: 0 26px; font-size: 1em; }
/* Durante la generazione il pulsante si "riempie" a righe mobili */
#btn-generate:disabled {
    opacity: 1;
    cursor: progress;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.18) 0 10px, transparent 10px 20px);
    background-size: 28px 28px;
    animation: stripes 0.8s linear infinite;
}

button.ghost, button.secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-2);
}
button.ghost:hover, button.secondary:hover { background: #fff; border-color: var(--ink); }

button.danger { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

button.small { height: 46px; }

button.icon {
    width: 40px;
    padding: 0;
    font-size: 1.25em;
    line-height: 1;
    background: transparent;
    color: var(--ink);
    border-color: var(--line-2);
}
button.icon:hover { background: #fff; border-color: var(--ink); }

button.chip {
    height: 32px;
    padding: 0 12px;
    font-size: 0.8em;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
button.chip:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }

/* ---------- Stato ---------- */

#status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line-2);
    font-size: 0.92em;
    color: var(--ink-2);
}
#status-bar::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ---------- Account e limiti ---------- */

.account { display: inline-flex; align-items: center; }
.account[hidden], .account-user[hidden], .google-button[hidden] { display: none; }
.google-button { display: inline-flex; min-height: 32px; text-transform: none; letter-spacing: normal; }
.account-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--ink);
}
.account-initial {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
}
.account-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Esci": area di tocco di almeno 40px anche in larghezza */
#btn-logout { padding: 11px 8px; margin: -11px -8px; }

.quota-line {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f1ebdd;
    border: 1px solid var(--line);
    font-size: 0.88em;
    font-weight: 650;
    color: var(--ink-2);
}
.quota-line[hidden] { display: none; }
.quota-line.empty { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }

.account-quota {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1.5px solid var(--ink);
    font-size: 0.82em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.account-quota:empty { display: none; }
.account-quota.empty { border-color: var(--accent); background: var(--accent); color: #fff; }

.limit-notice {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    animation: rise 0.35s var(--ease-out) both;
}
.limit-notice[hidden] { display: none; }
.limit-notice p { font-weight: 600; line-height: 1.5; }
.limit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.limit-actions:empty { display: none; }
#limit-plans[hidden], #quota-plans[hidden] { display: none; }
.quota-line .link { font-weight: 700; }
.account-stats { color: var(--accent-ink); font-weight: 700; padding: 11px 4px; margin: -11px 0; }
.account-stats[hidden] { display: none; }

/* Piani in arrivo ("Avvisami"): tre offerte affiancate, una sotto l'altra sui telefoni */
#plans-dialog {
    width: min(820px, calc(100% - 24px));
    max-width: none;
    max-height: min(90vh, 900px);
    max-height: min(90dvh, 900px);
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 40px 90px -30px rgba(22, 20, 15, 0.6);
}
#plans-dialog[open] { animation: rise 0.3s var(--ease-out) both; }
#plans-dialog::backdrop { background: rgba(22, 20, 15, 0.55); backdrop-filter: blur(3px); }
#plans-dialog .print-options { padding-bottom: 22px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: #fff;
}
.plan.chosen { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--accent); }
.plan-kicker { font-size: 0.72em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.plan-price { color: var(--ink-2); }
.plan-sub { min-height: 1.4em; font-size: 0.85em; color: var(--muted); }
.billing { display: inline-flex; align-self: center; padding: 4px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; }
.billing-option { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 0.92em; cursor: pointer; }
.billing-option input { position: absolute; opacity: 0; pointer-events: none; }
.billing-option:has(input:checked) { background: var(--ink); color: #fff; }
.billing-option:has(input:focus-visible) { outline: 3px solid rgba(210, 54, 30, 0.45); outline-offset: 2px; }
.billing-save { padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8em; }
/* Franklin, non Bodoni: nel Bodoni "4" e "1" sottili si confondono (2,49 sembrava 2,19) */
.plan-price strong { font-family: var(--font-ui); font-size: 1.7em; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-list { flex: 1; margin: 0; padding-left: 1.1em; font-size: 0.9em; line-height: 1.45; color: var(--muted); }
.plan-list li + li { margin-top: 4px; }
.plan-btn { width: 100%; margin-top: 6px; }
.plan.chosen .plan-btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.plans-note { padding: 12px 14px; border-radius: var(--radius-sm); background: #f1ebdd; line-height: 1.5; }
.plans-note[hidden] { display: none; }
.plans-note .google-button { display: inline-block; margin-top: 8px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }

#credits a { color: inherit; }

/* Pagine informative (privacy) */
.legal .masthead { margin-bottom: 12px; }
.legal-back { color: var(--ink); font-weight: 700; letter-spacing: 0.08em; text-decoration: none; }
.legal-back:hover { color: var(--accent); }

/* Pagina statistiche (solo amministratori) */
.stats-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 22px; }
.stats-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.stats-card strong { display: block; font-size: 1.6em; font-variant-numeric: tabular-nums; }
.stats-card span { font-size: 0.85em; color: var(--muted); }
.stats-scroll { overflow-x: auto; margin-bottom: 22px; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.88em; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
.stats-table thead th { font-size: 0.8em; color: var(--ink-2); }
.stats-range { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.stats-range select { width: auto; }
#waitlist-table th, #waitlist-table td { text-align: left; }
.stats-link-maker { margin: 12px 0 14px; flex-wrap: wrap; }
.stats-link-maker #source-name { flex: 0 1 180px; }
.stats-link-maker #source-link { flex: 1 1 240px; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 0.88em; }
.legal-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 30px 34px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    line-height: 1.65;
}
.legal-body h1 { font-family: var(--font-display); font-size: 2.2em; line-height: 1.1; margin: 4px 0; }
.legal-body h2 { font-family: var(--font-display); font-size: 1.35em; margin: 26px 0 10px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.legal-body p { margin-bottom: 10px; }
.legal-body a { color: var(--accent-ink); font-weight: 650; }
.legal-updated { color: var(--muted); font-size: 0.88em; }
@media (max-width: 720px) { .legal-body { padding: 20px 18px 24px; } }

.home-ideas { margin-bottom: 6px; }

/* ---------- Cassetti: parole personali e salvataggi ---------- */

.drawers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 28px;
    animation: rise 0.7s 0.35s var(--ease-out) both;
}

.drawer summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    border-radius: var(--radius);
    transition: background 0.15s;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after {
    content: '';
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s var(--ease-out);
}
.drawer[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.drawer summary:hover { background: rgba(22, 20, 15, 0.03); }
.drawer summary:focus-visible { outline: 3px solid rgba(210, 54, 30, 0.45); outline-offset: 2px; }
.drawer .card-kicker { font-size: 0.72em; }

.count {
    padding: 1px 9px;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
}
.count:empty { display: none; }

.drawer-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 20px 20px;
    animation: fade 0.3s var(--ease-out) both;
}

.help { font-size: 0.86em; line-height: 1.6; color: var(--muted); }
.help strong { color: var(--ink-2); }

code, kbd {
    padding: 1px 6px;
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 0.88em;
    color: var(--ink);
    background: #f1ebdd;
    border: 1px solid var(--line);
    border-radius: 5px;
}
kbd { border-bottom-width: 2px; }

.actions, .archive-save { display: flex; gap: 10px; flex-wrap: wrap; }
#archive-name { flex: 1 1 220px; width: auto; }

#custom-summary { font-size: 0.85em; color: var(--ink-2); }
#custom-summary ul { margin: 6px 0 0 18px; color: var(--accent-ink); }

#archive-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
#archive-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color 0.15s;
}
#archive-list li:hover { border-color: var(--line-2); }
#archive-list li.current { border-color: var(--accent); background: var(--accent-soft); }
#archive-list .archive-info { flex: 1 1 200px; min-width: 0; }
#archive-list .archive-name { font-weight: 700; overflow-wrap: anywhere; }
#archive-list .archive-meta { font-size: 0.8em; color: var(--muted); }
#archive-list .archive-empty {
    justify-content: center;
    padding: 18px;
    border-style: dashed;
    background: transparent;
    font-size: 0.88em;
    color: var(--muted);
}
#archive-list button { height: 34px; padding: 0 12px; font-size: 0.82em; }

/* ---------- Griglia e definizioni ---------- */

#main-content {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    animation: rise 0.8s 0.45s var(--ease-out) both;
}

/* La colonna della griglia e larga quanto la griglia (almeno 560px, per la barra della definizione):
   il testo della definizione attiva non deve allargarla, altrimenti a ogni parola (Tab) le colonne
   cambiavano larghezza e la lista delle definizioni saltava */
#grid-container { flex-shrink: 0; max-width: 100%; min-width: min(560px, 100%); }
#current-clue, .grid-toolbar, #help-text { contain: inline-size; }

#current-clue {
    display: flex;
    flex-wrap: wrap;   /* colonna stretta: i pulsanti vanno sotto, la definizione resta leggibile */
    align-items: center;
    gap: 8px 12px;
    min-height: 58px;
    padding: 10px 12px 10px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
}
#current-clue-dir {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent);
    font-size: 0.74em;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
#current-clue-dir:empty { display: none; }
.clue-actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
/* Separatore tra l'aiuto e il cambio di direzione */
#btn-direction { margin-left: 6px; }

#current-clue-text {
    flex: 1 1 260px;
    font-family: var(--font-display);
    font-size: 1.14em;
    font-weight: 500;
    line-height: 1.3;
}

.sheet { padding: 14px; box-shadow: var(--shadow-lift); }

#crossword-grid { position: relative; user-select: none; -webkit-tap-highlight-color: transparent; }
/* Doppio tocco = cambia direzione, non zoom del browser */
#crossword-grid, button, select, .clues-section li, .drawer summary { touch-action: manipulation; }
#crossword-grid svg { display: block; }
/* Griglie grandi o ingrandite: scorrono dentro il riquadro */
#crossword-grid.scrollable { overflow: auto; max-height: 76vh; max-width: 100%; }

#crossword-grid svg g {
    transform-box: fill-box;
    transform-origin: center;
    animation: stamp 0.5s var(--ease-out) both;
    animation-delay: var(--d, 0ms);
}
#crossword-grid svg g rect {
    fill: #fff;
    stroke: var(--ink);
    stroke-width: 1;
    cursor: pointer;
    transition: fill 0.12s;
}
/* Solo con il mouse (sui touch screen :hover resta attaccato) e mai sopra i colori di stato */
@media (hover: hover) {
    #crossword-grid svg g:not(.active):not(.highlighted):not(.correct):not(.wrong):hover rect:not(.black) { fill: #fbf8f0; }
}
#crossword-grid svg g rect.black { fill: var(--ink); cursor: default; }
#crossword-grid svg g.correct rect { fill: var(--ok); }
#crossword-grid svg g.wrong rect { fill: var(--ko); }
/* La parola e la casella attive restano visibili anche se valutate */
#crossword-grid svg g.highlighted rect { fill: var(--mark-soft); }
#crossword-grid svg g.active rect { fill: var(--mark); }

/* Caselle svelate con l'aiuto: angolino e lettera in rosso */
#crossword-grid svg .cell-flag { display: none; fill: var(--accent); pointer-events: none; }
#crossword-grid svg g.revealed .cell-flag { display: inline; }
#crossword-grid svg g.revealed .cell-letter { fill: var(--accent-ink); }
/* Lettere gia scritte alla creazione: grigie, piu leggere */
#crossword-grid svg g.given .cell-letter { fill: var(--muted); font-weight: 500; }

#crossword-grid svg .cell-number {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    fill: var(--ink-2);
    pointer-events: none;
}
#crossword-grid svg .cell-letter {
    font-family: var(--font-ui);
    font-size: 21px;
    font-weight: 650;
    text-anchor: middle;
    fill: var(--ink);
    pointer-events: none;
}

/* font-size 16px: sotto questa soglia Safari su iPhone ingrandisce la pagina a ogni tocco */
#hidden-input { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; font-size: 16px; pointer-events: none; }

.grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.zoom-controls, .toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }

#help-text { margin-top: 10px; font-size: 0.8em; color: var(--muted); }

#clues-container {
    flex: 1;
    min-width: 280px;
    max-height: calc(100vh - 48px);
    position: sticky;
    top: 24px;
    overflow-y: auto;
    padding: 8px 22px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

.clues-section h3 {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 0 8px;
    margin-bottom: 6px;
    background: var(--surface);
    border-bottom: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 1.5em;
    font-style: italic;
    font-weight: 600;
}
.clues-section:first-child h3::after { content: '→'; font-style: normal; font-size: 0.7em; color: var(--accent); }
.clues-section:last-child h3::after { content: '↓'; font-style: normal; font-size: 0.7em; color: var(--accent); }
.clues-section + .clues-section { margin-top: 10px; }

.clues-section ol { list-style: none; }
.clues-section li {
    position: relative;
    padding: 6px 8px 6px 2.9em;
    margin: 0 -8px;
    font-size: 0.94em;
    line-height: 1.45;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.clues-section li:hover { background: #f6f1e5; }
.clues-section li .clue-number {
    position: absolute;
    left: 8px;
    width: 2.2em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.clues-section li .clue-length { color: var(--muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.clues-section li.active { background: var(--mark-soft); box-shadow: inset 3px 0 0 var(--accent); }
.clues-section li.correct { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ok-ink); }
.clues-section li.correct .clue-number { color: var(--ok-ink); }
.clues-section li.wrong { background: var(--ko); }

/* ---------- Stampa per la scuola ---------- */

#print-sheet { display: none; }

.shared-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 18px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
    animation: rise 0.5s var(--ease-out) both;
}
.shared-banner[hidden] { display: none; }
/* Cruciverba condiviso: si va dritti allo schema (la scheda di generazione torna con "Crea il tuo") */
body.shared-view #controls, body.shared-view .drawers { display: none; }
body.shared-view #main-content { animation-delay: 0.1s; }
.shared-kicker { font-size: 0.72em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mark); }
.shared-text strong { font-family: var(--font-display); font-size: 1.15em; font-weight: 600; }
.shared-new {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.shared-new:hover { background: var(--accent-ink); }

.share-link { display: flex; gap: 8px; }
.share-link input { flex: 1; min-width: 0; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 0.88em; }
#btn-share-native { align-self: flex-start; }

#print-dialog, #share-dialog {
    width: min(560px, calc(100% - 24px));
    max-width: none;
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 40px 90px -30px rgba(22, 20, 15, 0.6);
}
#print-dialog[open], #share-dialog[open] { animation: rise 0.3s var(--ease-out) both; }
#print-dialog::backdrop, #share-dialog::backdrop { background: rgba(22, 20, 15, 0.55); backdrop-filter: blur(3px); }
#share-dialog .print-options { padding-bottom: 22px; }
.print-options { display: flex; flex-direction: column; gap: 14px; padding: 18px 26px 6px; }
.print-options fieldset { border: none; display: flex; flex-direction: column; gap: 8px; }
.print-options legend {
    margin-bottom: 8px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.choice, .check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.4; }
.choice { padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.choice span { display: flex; flex-direction: column; font-size: 0.92em; color: var(--muted); }
.choice strong { color: var(--ink); font-size: 1.05em; }
.choice input, .check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.check[hidden] { display: none; }
.print-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 26px 22px; }

/* ---------- Guida ---------- */

#help-dialog {
    width: min(760px, calc(100% - 24px));
    max-width: none;
    max-height: min(88vh, 900px);
    max-height: min(88dvh, 900px);
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 40px 90px -30px rgba(22, 20, 15, 0.6);
    overflow: hidden;
}
#help-dialog[open] { display: flex; animation: rise 0.35s var(--ease-out) both; }
#help-dialog::backdrop { background: rgba(22, 20, 15, 0.55); backdrop-filter: blur(3px); }
body:has(#help-dialog[open]) { overflow: hidden; }

.help-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; }

.help-header {
    position: relative;
    padding: 22px 64px 14px 26px;
    border-bottom: 1px solid var(--line);
}
.help-kicker {
    font-size: 0.7em;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.help-header h2 {
    font-family: var(--font-display);
    font-size: 1.7em;
    font-weight: 700;
    line-height: 1.15;
}
/* Pulsante di chiusura delle finestre (guida, stampa) */
.help-header > button.icon { position: absolute; top: 18px; right: 18px; font-size: 1.5em; }

.help-toc {
    display: flex;
    flex-wrap: wrap;          /* schermi larghi: tutti gli argomenti visibili, su piu righe */
    gap: 6px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--line);
}
.help-toc a {
    flex: none;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-size: 0.85em;
    font-weight: 650;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.help-toc a:hover, .help-toc a:focus-visible { border-color: var(--ink); background: #fff; outline: none; }

.help-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 26px 26px;
    overscroll-behavior: contain;
}
.help-body section { padding-top: 20px; }
.help-body section + section { margin-top: 6px; border-top: 1px dashed var(--line-2); }
.help-body h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 1.3em;
    font-weight: 700;
}
.help-num {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 2px solid var(--ink);
    font-family: var(--font-ui);
    font-size: 0.62em;
    font-weight: 800;
}
.help-steps, .help-list { padding-left: 20px; display: grid; gap: 8px; line-height: 1.6; }
.help-list { list-style: none; padding-left: 0; }
.help-list li { position: relative; padding-left: 20px; }
.help-list li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    background: var(--accent);
}
.help-steps li::marker { font-weight: 800; color: var(--accent); }
.help-body a { color: var(--accent-ink); font-weight: 650; }

.swatch {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    border: 1px solid var(--ink);
}
.swatch-word { background: var(--mark-soft); }
.swatch-active { background: var(--mark); }
.swatch-ok { background: var(--ok); }
.swatch-ko { background: var(--ko); }
.swatch-flag { background: linear-gradient(225deg, var(--accent) 0 38%, #fff 38%); }
.swatch-given {
    width: 1.35em;
    height: 1.35em;
    background: #fff;
    color: var(--muted);
    text-align: center;
    font-size: 0.85em;
    line-height: 1.3em;
    font-weight: 500;
}
.help-intro { margin-bottom: 10px; color: var(--ink-2); }

.help-keys { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 0.92em; }
.help-keys caption {
    text-align: left;
    padding-bottom: 6px;
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.help-keys td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.help-keys td:first-child { width: 40%; white-space: nowrap; }

.help-example {
    margin: 8px 0 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f1ebdd;
    border: 1px solid var(--line);
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 0.86em;
    line-height: 1.6;
    white-space: pre-wrap;
}

#credits {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
    font-size: 0.74em;
    color: var(--muted);
    text-align: center;
}

/* ---------- Animazioni ---------- */

@keyframes drop {
    from { opacity: 0; transform: translateY(-18px) rotate(-6deg); }
    to { opacity: 1; transform: none; }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stamp {
    0% { opacity: 0; transform: scale(0.55); }
    70% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: none; }
}
@keyframes stripes { to { background-position: 28px 0; } }

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

/* ---------- Schermi piccoli ---------- */

@media (max-width: 1000px) {
    /* Mentre si scorre la griglia (o si apre la tastiera) la definizione resta visibile */
    #current-clue { position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 5; }
    .controls-grid { grid-template-columns: 1fr 1fr; }
    #main-content { flex-direction: column; }
    #grid-container { width: 100%; }
    #clues-container { position: static; max-height: none; width: 100%; }
}

@media (max-width: 720px) {
    #app {
        padding: 18px 14px 32px;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: max(32px, env(safe-area-inset-bottom));
    }
    .drawers { grid-template-columns: 1fr; }
    .masthead-kicker { display: none; }
    .masthead-line { justify-content: center; }
    .masthead-right { width: 100%; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; }
    .account-name { max-width: 10ch; }
    button.help-btn, button.install-btn { height: 40px; }
    /* Telefono: accanto a "Accedi con Google" e "Guida" basta "App" */
    .install-long { display: none; }
    .install-short { display: inline; }
    button.chip, #archive-list button { height: 40px; }
    .help-header { padding: 18px 60px 12px 18px; }
    .help-header h2 { font-size: 1.4em; }
    /* Telefono: una riga che scorre col dito (o con la rotellina), barra sottile ma visibile
       e sfumatura sul bordo destro a indicare che ci sono altri argomenti */
    .help-toc {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px 14px 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--line-2) transparent;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }
    .help-toc.at-end { mask-image: none; }
    .help-toc::-webkit-scrollbar { height: 4px; }
    .help-toc::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
    .help-body { padding: 4px 18px 22px; }
    .help-keys td:first-child { width: auto; white-space: normal; }
}

@media (max-width: 560px) {
    /* Caselle del titolo troppo piccole per i numerini */
    .title-cell sup { display: none; }
}

@media (max-width: 520px) {
    .controls-grid { grid-template-columns: 1fr; }
    #controls { padding: 18px 16px 14px; }
    .grid-toolbar { justify-content: center; }
    .toolbar-actions button { flex: 1 1 calc(50% - 6px); }
    /* Barra: etichetta, poi la definizione su una riga intera, poi i pulsanti larghi */
    #current-clue { flex-wrap: wrap; row-gap: 8px; }
    #current-clue-dir { order: 1; }
    #current-clue-text { order: 2; flex-basis: 100%; }
    .clue-actions { order: 3; flex-basis: 100%; }
    .clue-actions button { flex: 1; padding: 0 8px; }
    #btn-direction { margin-left: 0; }
}

/* ---------- Stampa ---------- */

/* Scheda per la scuola (pulsante "Stampa / PDF"): si stampa solo #print-sheet */
@media print {
    @page { size: A4; margin: 14mm 14mm 12mm; }
    body.printing { background: #fff; }
    body.printing #app { display: none; }
    body.printing #print-sheet { display: block; color: #111; font-family: var(--font-ui); font-size: 10.5pt; }
    .print-page + .print-page { break-before: page; }
    /* Tre pagine separate: la pagina delle definizioni ha tutto il foglio, corpo piu grande */
    .print-page-grid .print-grid { margin-top: 18pt; }
    #print-sheet .print-page-clues .print-clues { column-count: 2; column-gap: 26pt; font-size: 11pt; }
    #print-sheet.dense .print-page-clues .print-clues { column-count: 2; font-size: 10pt; }
    #print-sheet.xdense .print-page-clues .print-clues { column-count: 3; column-gap: 16pt; font-size: 9pt; }
    .print-page-clues .print-clues-section li { padding: 2pt 0; }
    /* Griglie giganti (25x25, 30x30): una pagina per le orizzontali e una per le verticali.
       Selettori con .print-page-clues.print-page-split: devono vincere su #print-sheet.xdense (sempre attivo qui) */
    #print-sheet .print-page-clues.print-page-split .print-clues { column-count: 3; column-gap: 14pt; font-size: 8.6pt; }
    #print-sheet .print-page-clues.print-page-split .print-clues-section li { padding: 0.6pt 0; line-height: 1.2; }
    #print-sheet .print-page-clues.print-page-split .print-head { margin-bottom: 6pt; }
    #print-sheet .print-page-clues.print-page-split-xl .print-clues { column-count: 4; column-gap: 10pt; font-size: 8pt; }
    .print-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-bottom: 6pt; margin-bottom: 10pt; border-bottom: 1.5pt solid #111; }
    .print-head h1 { font-family: var(--font-display); font-size: 20pt; font-weight: 700; line-height: 1.1; }
    .print-sub { color: #555; font-size: 9pt; letter-spacing: 0.08em; text-transform: uppercase; }
    .print-student { display: flex; gap: 18px; width: 100%; margin-top: 8pt; }
    .print-field { display: flex; align-items: baseline; gap: 6px; flex: 1; font-size: 10pt; }
    .print-field:first-child { flex: 2.2; }
    .print-line { flex: 1; border-bottom: 1pt solid #111; height: 1em; }
    .print-grid { display: flex; justify-content: center; margin: 4pt 0 12pt; break-inside: avoid; }
    .print-svg { height: auto; }
    .print-svg rect { fill: #fff; stroke: #111; stroke-width: 1; }
    .print-svg rect.black { fill: #111; }
    .print-svg .cell-number { font-family: var(--font-ui); font-size: 9px; font-weight: 700; fill: #111; }
    .print-svg .cell-letter { font-family: var(--font-ui); font-size: 21px; font-weight: 600; text-anchor: middle; fill: #111; }
    .print-clues { column-count: 2; column-gap: 22pt; }
    #print-sheet.dense .print-clues { column-count: 3; column-gap: 14pt; font-size: 8.6pt; }
    #print-sheet.dense .print-clues-section li { padding: 0.6pt 0; line-height: 1.25; }
    #print-sheet.dense .print-head { margin-bottom: 6pt; }
    #print-sheet.dense .print-grid { margin-bottom: 8pt; }
    #print-sheet.xdense .print-clues { font-size: 8.2pt; }
    #print-sheet.xdense .print-clues-section li { line-height: 1.2; }
    .print-answers { column-count: 3; font-size: 9pt; }
    #print-sheet.dense .print-answers { column-count: 4; font-size: 8.2pt; }
    .print-clues-section h2 { font-family: var(--font-display); font-style: italic; font-size: 13pt; margin: 0 0 4pt; break-after: avoid; }
    .print-clues-section + .print-clues-section h2 { margin-top: 8pt; }
    .print-clues-section ol { list-style: none; }
    .print-clues-section li { padding: 1.5pt 0; break-inside: avoid; line-height: 1.35; }
    .print-clues-section b { display: inline-block; min-width: 1.8em; }
    .print-len { color: #666; font-size: 0.9em; }
    .print-answers li { font-weight: 600; letter-spacing: 0.04em; }
    .print-credit { margin-top: 12pt; color: #888; font-size: 8pt; text-align: center; }
}

@media print {
    body { background: #fff; font-size: 12px; }
    #app { padding: 0; max-width: none; }
    #controls, .drawers, #current-clue, .grid-toolbar, #help-text, #credits, .masthead-line, .tagline, #help-dialog, #print-dialog, #share-dialog, .shared-banner, .limit-notice, .app-banner, .install-btn { display: none; }
    .masthead { margin-bottom: 12px; }
    .title-cell { width: 34px; font-size: 22px; animation: none; }
    #main-content { flex-direction: column; animation: none; }
    .sheet, #clues-container { border: none; box-shadow: none; padding: 0; background: none; }
    #crossword-grid, #crossword-grid.scrollable { overflow: visible; max-height: none; }
    #crossword-grid svg { width: 100% !important; max-width: 100% !important; height: auto; }
    #crossword-grid svg g { animation: none; }
    /* Niente evidenziazioni o valutazioni sulla carta */
    #crossword-grid svg g rect:not(.black),
    #crossword-grid svg g.correct rect, #crossword-grid svg g.wrong rect,
    #crossword-grid svg g.active rect, #crossword-grid svg g.highlighted rect { fill: #fff; stroke: #16140f; }
    #crossword-grid svg .cell-flag { display: none !important; }
    #crossword-grid svg g.revealed .cell-letter { fill: #16140f; }
    /* Le lettere gia scritte si stampano: fanno parte dello schema */
    #crossword-grid svg g.given .cell-letter { fill: #16140f; }
    #clues-container { position: static; max-height: none; overflow: visible; }
    .clues-section h3 { position: static; }
    .clues-section li { break-inside: avoid; padding: 1px 0; margin: 0; }
    .clues-section li.active, .clues-section li.correct, .clues-section li.wrong {
        background: none; box-shadow: none; text-decoration: none; color: inherit;
    }
    /* Griglie grandi: griglia a tutta pagina, definizioni su pagine successive in colonne */
    body.big-grid #grid-container { width: 100%; }
    body.big-grid #clues-container { break-before: page; }
    body.big-grid .clues-section ol { column-count: 3; column-gap: 20px; }
    body.big-grid .clues-section li { font-size: 0.8em; }
}