@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap');
:root
{
    color-scheme:dark;
    --bg:#080d18;
    --panel:#101827;
    --panel2:#0b1321;
    --line:#223047;
    --text:#edf4ff;
    --muted:#8fa2bd;
    --cyan:#5be1ff;
    --green:#48e0a4;
    --red:#ff6f86;
    --amber:#ffc66d
}

*
{
    box-sizing:border-box
}

body
{
    margin:0;
    min-height:100vh;
    background:radial-gradient(ellipse at 15% 0%,#10213a 0,transparent 40%),radial-gradient(ellipse at 90% 20%,#102b36 0,transparent 32%),var(--bg);
    color:var(--text);
    font-family:Inter,system-ui,sans-serif
}

.app-shell
{
    width:min(1050px,calc(100% - 36px));
    margin:0 auto;
    padding:26px 0 24px
}

.topbar
{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-bottom:25px;
    border-bottom:0
}

.brand
{
    display:flex;
    align-items:center;
    gap:12px;
    color:inherit;
    text-decoration:none
}

.brand-mark
{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg,#51dcff,#4c8cff);
    color:#07111f;
    font-weight:900;
    letter-spacing:-1px;
    box-shadow:0 0 28px #35c7ff2b
}

.brand strong
{
    display:block;
    letter-spacing:2px;
    font-size:14px
}

.brand small
{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:4px
}

.settings
{
    display:flex;
    gap:10px
}

.settings label
{
    display:grid;
    gap:5px;
    color:var(--muted);
    font-size:11px
}

.settings select
{
    background:#111c2c;
    color:var(--text);
    border:1px solid #2a3a51;
    border-radius:9px;
    padding:9px 28px 9px 10px;
    font:inherit;
    font-size:12px;
    outline:none
}

.intro
{
    padding:35px 0 24px
}

.eyebrow,.mini-label
{
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:800;
    color:var(--cyan)
}

h1
{
    font-size:clamp(28px,4vw,43px);
    letter-spacing:-1.6px;
    line-height:1.1;
    margin:12px 0 10px
}

.intro p
{
    margin:0;
    max-width:690px;
    color:var(--muted);
    line-height:1.65;
    font-size:14px
}

.stats
{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:18px
}

.stat-card
{
    background:linear-gradient(145deg,#121e30,#0d1523);
    border:1px solid var(--line);
    border-radius:14px;
    padding:15px 17px;
    min-width:0
}

.stat-card span
{
    display:block;
    font-size:10px;
    letter-spacing:1.3px;
    color:var(--muted);
    font-weight:700
}

.stat-card strong
{
    display:block;
    font-size:27px;
    letter-spacing:-.8px;
    margin-top:8px;
    font-variant-numeric:tabular-nums
}

.stat-card strong small
{
    font-size:11px;
    color:var(--muted);
    letter-spacing:0
}

.game-card,.result-card
{
    border:1px solid #293951;
    border-radius:18px;
    background:linear-gradient(145deg,#111c2d,#0c1422);
    padding:22px;
    box-shadow:0 18px 60px #0002
}

.game-card-top
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px
}

.phrase-meta
{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:7px;
    color:var(--muted);
    font-size:11px
}

.dot
{
    width:3px;
    height:3px;
    background:#526780;
    border-radius:50%
}

.status-pill
{
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid #2b3b50;
    background:#0b1523;
    border-radius:99px;
    padding:7px 11px;
    color:#a9bad0;
    font-size:11px
}

.status-dot
{
    width:7px;
    height:7px;
    background:#71839b;
    border-radius:50%
}

.status-pill.live
{
    color:var(--green);
    border-color:#28634f
}

.status-pill.live .status-dot
{
    background:var(--green);
    box-shadow:0 0 10px var(--green)
}

.typing-area
{
    position:relative;
    margin-top:20px;
    min-height:170px;
    border:1px solid #263750;
    background:#080f1c;
    border-radius:13px;
    overflow:hidden
}

.phrase-display,.typing-input
{
    font-family:"DM Mono",Consolas,monospace;
    font-size:clamp(16px,2vw,19px);
    line-height:2;
    letter-spacing:.1px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:normal;
    padding:20px;
    width:100%;
    margin:0;
    min-height:170px;
    tab-size:2
}

.phrase-display
{
    position:absolute;
    inset:0;
    color:#6e819b;
    pointer-events:none
}

.phrase-display .correct
{
    color:var(--green)
}

.phrase-display .wrong
{
    color:var(--red);
    background:#ff6f861b;
    border-radius:3px;
    text-decoration:underline;
    text-decoration-color:#ff6f86;
    text-underline-offset:4px
}

.phrase-display .current
{
    border-left:2px solid var(--cyan);
    animation:blink 1s step-end infinite
}

.phrase-display .pending
{
    color:#70819a
}

.typing-input
{
    position:absolute!important;
    left:-10000px!important;
    top:0!important;
    width:1px!important;
    height:1px!important;
    min-height:0!important;
    max-height:none!important;
    resize:none!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
    caret-color:transparent!important;
    text-shadow:none!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    z-index:-1!important;
    overflow:hidden!important;
    font-size:1px!important;
    line-height:1px!important;
    padding:0!important;
    margin:0!important;
    appearance:none!important;
    -webkit-appearance:none!important
}

.typing-input:focus,.typing-input:focus-visible
{
    outline:0!important;
    border:0!important;
    box-shadow:none!important
}

.typing-input::placeholder
{
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
    opacity:0!important
}

.typing-input:disabled
{
    cursor:not-allowed
}

.typing-hint
{
    position:absolute;
    right:13px;
    bottom:9px;
    color:#667a95;
    font-size:10px;
    pointer-events:none;
    z-index:3
}

.progress-track
{
    height:4px;
    background:#1c2a3d;
    border-radius:9px;
    margin-top:18px;
    overflow:hidden
}

.progress-track div
{
    height:100%;
    width:0;
    background:linear-gradient(90deg,#3ca8ff,var(--cyan));
    transition:width .12s
}

.game-actions
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:18px
}

.left-actions,.right-actions
{
    display:flex;
    align-items:center;
    gap:9px
}

.btn
{
    border:1px solid transparent;
    border-radius:10px;
    padding:11px 16px;
    font:700 12px Inter,sans-serif;
    cursor:pointer;
    transition:transform .15s,background .15s
}

.btn:hover
{
    transform:translateY(-1px)
}

.btn:disabled
{
    opacity:.45;
    cursor:not-allowed;
    transform:none
}

.btn-primary
{
    background:linear-gradient(135deg,#67e4ff,#6da7ff);
    color:#06111d;
    box-shadow:0 7px 22px #48baff20
}

.btn-secondary
{
    background:#152237;
    border-color:#2a3c55;
    color:#d9e7fa
}

.keyboard-note
{
    font-size:10px;
    color:#7588a2
}

.result-card
{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:16px;
    flex-wrap:wrap;
    border-color:#27604e
}

.result-card.hidden
{
    display:none
}

.result-icon
{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#123b31;
    color:var(--green);
    font-size:24px
}

.result-content
{
    flex:1;
    min-width:180px
}

.result-content h2
{
    font-size:20px;
    margin:6px 0
}

.result-content p
{
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.5
}

.score-block
{
    display:grid;
    gap:4px;
    text-align:right;
    padding-right:10px
}

.score-block span
{
    font-size:9px;
    color:var(--muted);
    letter-spacing:1.2px;
    font-weight:800
}

.score-block strong
{
    font-size:27px;
    color:var(--green);
    font-variant-numeric:tabular-nums
}

.rules
{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    padding:25px 3px
}

.rule
{
    display:flex;
    gap:10px
}

.rule-icon
{
    flex:none;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:1px solid #2c415a;
    border-radius:8px;
    color:var(--cyan);
    font-weight:800
}

.rule strong
{
    font-size:11px
}

.rule p
{
    font-size:10px;
    line-height:1.6;
    color:var(--muted);
    margin:5px 0 0
}

footer
{
    text-align:center;
    color:#61738d;
    font-size:10px;
    letter-spacing:.5px;
    padding:12px
}

footer span
{
    color:#3b526e
}

@keyframes blink
{
    50%
    {
        border-color:transparent
    }
}

@media(max-width:700px)
{
    .app-shell
    {
        width:calc(100% - 24px);
        padding-top:15px
    }

    .topbar
    {
        align-items:flex-start;
        flex-direction:column
    }

    .settings
    {
        width:100%
    }

    .settings label
    {
        flex:1
    }

    .settings select
    {
        width:100%
    }

    .intro
    {
        padding-top:26px
    }

    .stats
    {
        grid-template-columns:repeat(2,1fr);
        gap:8px
    }

    .stat-card
    {
        padding:12px
    }

    .stat-card strong
    {
        font-size:24px
    }

    .game-card,.result-card
    {
        padding:15px
    }

    .game-actions
    {
        align-items:flex-start;
        flex-direction:column
    }

    .right-actions
    {
        width:100%
    }

    .rules
    {
        grid-template-columns:1fr;
        gap:14px
    }

    .phrase-display,.typing-input
    {
        padding:14px;
        font-size:16px
    }

    .typing-area,.phrase-display
    {
        min-height:200px
    }

    .typing-input
    {
        min-height:0!important;
        height:1px!important;
        width:1px!important
    }

    .score-block
    {
        text-align:left
    }

    .result-card .btn
    {
        width:100%
    }
}

/* Type Blitz: nasconde SOLO il campo di input, non il testo renderizzato in .phrase-display. */
.typing-area
{
    position:relative;
    overflow:hidden;
}

.phrase-display
{
    position:absolute;
    inset:0;
    display:block;
    z-index:1;
    color:#6e819b;
    visibility:visible;
    opacity:1;
    pointer-events:none;
}

.phrase-display .pending
{
    color:#70819a;
}

.phrase-display .correct
{
    color:var(--green);
}

.phrase-display .wrong
{
    color:var(--red);
    background:#ff6f861b;
    text-decoration:underline;
    text-decoration-color:var(--red);
    text-underline-offset:4px;
}

.typing-input
{
    position:fixed !important;
    left:-10000px !important;
    top:0 !important;
    width:1px !important;
    height:1px !important;
    min-width:1px !important;
    min-height:1px !important;
    max-width:1px !important;
    max-height:1px !important;
    padding:0 !important;
    margin:0 !important;
    resize:none !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    caret-color:transparent !important;
    opacity:0 !important;
    visibility:visible !important;
    pointer-events:none !important;
    z-index:-9999 !important;
    overflow:hidden !important;
    font-size:1px !important;
    line-height:1px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}

.status-pill.completed
{
    color:var(--green);
    border-color:#28634f;
    background:#0b1c1b;
}

.status-pill.completed .status-dot
{
    background:var(--green);
    box-shadow:0 0 10px var(--green);
}

/* Stato completato: evidenza luminosa ben visibile dopo l'ultima battuta. */
.status-pill.completed
{
    color: #7dffbd !important;
    border-color: #42f5a0 !important;
    background: rgba(20, 92, 62, 0.34) !important;
    box-shadow: 0 0 8px rgba(66, 245, 160, 0.42), inset 0 0 8px rgba(66, 245, 160, 0.12) !important;
    text-shadow: 0 0 8px rgba(125, 255, 189, 0.72);
    animation: completedGlow 1.5s ease-in-out infinite alternate;
}

.status-pill.completed .status-dot
{
    background: #7dffbd !important;
    box-shadow: 0 0 5px #7dffbd, 0 0 12px #42f5a0, 0 0 20px rgba(66, 245, 160, 0.9) !important;
}

@keyframes completedGlow
{
    from
    {
        box-shadow: 0 0 6px rgba(66, 245, 160, 0.3), inset 0 0 5px rgba(66, 245, 160, 0.08);
    }

    to
    {
        box-shadow: 0 0 15px rgba(66, 245, 160, 0.72), inset 0 0 10px rgba(66, 245, 160, 0.2);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .status-pill.completed
    {
        animation: none;
    }
}

/* Stato risultato coerente con l'esito del livello corrente. */
.result-card.failed
{
    border-color:#8b3b4b;
    background:linear-gradient(145deg,#241521,#111321)
}

.result-card.failed .result-icon
{
    background:#4a202b;
    color:#ff7185
}

.result-card.passed
{
    border-color:#27604e
}

.total-score-stat
{
    border-color:#28634f;
    background:linear-gradient(145deg,#112b2a,#0d1924)
}

.total-score-stat strong
{
    color:var(--green);
    text-shadow:0 0 14px #48e0a455
}

@media(min-width:701px)
{
    .stats
    {
        grid-template-columns:repeat(5,1fr)
    }
}

/* Riepilogo finale della campagna */
.campaign-recap
{
    margin-top:16px;
    padding:22px;
    border:1px solid #27604e;
    border-radius:18px;
    background:linear-gradient(145deg,#11251f,#0c1422);
}

.campaign-recap.hidden
{
    display:none;
}

.campaign-recap h2
{
    margin:0 0 16px;
    color:var(--cyan);
    font-size:13px;
    letter-spacing:1.8px;
}

.recap-grid
{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.recap-stat
{
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:14px;
    border:1px solid #263d3a;
    border-radius:12px;
    background:#0b1720;
    min-width:0;
}

.recap-stat span
{
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.recap-stat strong
{
    font-size:25px;
    color:var(--green);
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;
}

@media(max-width:700px)
{
    .recap-grid
    {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .campaign-recap
    {
        padding:15px
    }

    .recap-stat
    {
        padding:11px
    }

    .recap-stat strong
    {
        font-size:22px
    }
}

/* La difficoltà è controllata esclusivamente dalla campagna: nessuna tendina visibile. */
#difficultyControl
{
    display:none!important
}

/* Riduce le etichette Interfaccia e Testo */
#guiLabel,
#textLabel {
    font-size: 8px !important;
}

@media screen and (max-width: 640px) {
    .digitnfun-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .digitnfun-logo img {
        width: 260px !important;
        max-width: 75vw !important;
        height: auto !important;
    }
}
/* CPM e scorciatoia Invio nel pulsante per proseguire alla fase successiva. */
@media (min-width:701px) {
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
#againShortcut {
  display:inline-block;
  margin-left:3px;
  padding:2px 5px;
  border:1px solid rgba(6,17,29,.28);
  border-radius:5px;
  color:rgba(6,17,29,.78);
  font-size:9px;
  font-weight:800;
}

/* Le sei statistiche restano sempre su una sola riga e si adattano allo spazio disponibile. */
.stats {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: clamp(2px, 0.8vw, 12px);
    width: 100%;
}

.stats .stat-card {
    min-width: 0;
    padding: clamp(4px, 1.1vw, 15px) clamp(2px, 0.8vw, 17px);
    overflow: hidden;
}

.stats .stat-card span {
    font-size: clamp(5px, 1.15vw, 10px);
    letter-spacing: clamp(0px, 0.12vw, 1.3px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats .stat-card strong {
    font-size: clamp(10px, 2.3vw, 27px);
    letter-spacing: -0.4px;
    white-space: nowrap;
    margin-top: clamp(3px, 0.7vw, 8px);
}

.stats .stat-card strong small {
    font-size: clamp(6px, 0.95vw, 11px);
}


/* Invio del risultato alla classifica */
.leaderboard-submit-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.leaderboard-submit-form label { color: var(--muted); font-size: 13px; font-weight: 700; }
.leaderboard-submit-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.leaderboard-submit-row input { flex: 1 1 220px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); color: var(--text); font: inherit; }
.leaderboard-submit-row a { text-decoration: none; display: inline-flex; align-items: center; }
#leaderboardSubmitMessage { margin: 0; color: var(--muted); font-size: 12px; }
#leaderboardSubmitMessage.success { color: var(--green); }
#leaderboardSubmitMessage.error { color: var(--red); }

.global-leaderboard-link { text-align:center; padding: 0 0 16px; font-size:12px; }
.global-leaderboard-link a { color:var(--cyan); text-decoration:none; }
.global-leaderboard-link a:hover { text-decoration:underline; }