*{
    box-sizing:border-box;
}

:root{

    --bg:#111827;
    --card:#1f2937;
    --card2:#374151;

    --blue:#2563eb;
    --green:#22c55e;
    --orange:#f59e0b;
    --red:#ef4444;

    --text:#f9fafb;
    --muted:#9ca3af;

}

body{

    margin:0;

    background:var(--bg);

    color:var(--text);

    font-family:"Inter",sans-serif;

}


/* ------------------------------- */

.container{

    max-width:1400px;

    margin:auto;

    min-height:100vh;

    padding:24px;

    display:grid;

    grid-template-columns:1.25fr .95fr;

    grid-template-areas:

        "header goal"
        "timer goal"
        "stats goal"
        "buttons buttons";

    gap:22px;

}

/* ------------------------------- */

.header{

    grid-area:header;

}

h1{

    margin:0;

    font-size:2.5rem;

    font-weight:800;

}

.status{

    margin-top:10px;

    font-size:1.15rem;

    color:var(--muted);

}

/* ------------------------------- */

.goal-card,
.timer-card,
.stat-card{

    background:var(--card);

    border-radius:20px;

    padding:22px;

}

.goal-card{

    grid-area:goal;

    display:flex;

    flex-direction:column;

}

.goal{

    text-align:center;

    font-size:4rem;

    font-weight:800;

    margin-bottom:24px;

}

/* ------------------------------- */

.reply-grid{

    display:grid;

    grid-template-columns:repeat(8,1fr);

    gap:10px;

    justify-items:center;

    margin-top:auto;

}

.reply-cell{

    width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:10px;

    background:var(--card2);

    color:#94a3b8;

    font-weight:700;

    transition:.25s;

}

.reply-cell.done{

    background:var(--blue);

    color:white;

    transform:scale(1.04);

    box-shadow:0 0 12px rgba(37,99,235,.35);

}

/* ------------------------------- */

.timer-card{

    grid-area:timer;

    text-align:center;

}

.label{

    color:var(--muted);

    font-size:1.1rem;

}

#timer{

    margin:18px 0;

    font-size:clamp(5rem,10vw,7rem);

    font-weight:800;

    line-height:1;

}

/* ------------------------------- */

#replyButton{

    width:100%;

    margin-top:12px;

    border:none;

    border-radius:18px;

    padding:22px;

    background:var(--blue);

    color:white;

    font-size:1.45rem;

    font-weight:800;

    cursor:pointer;

    transition:.2s;

}

#replyButton:hover{

    transform:translateY(-2px);

}

#replyButton:active{

    transform:scale(.98);

}

#replyButton.success{

    background:var(--green);

}

/* ------------------------------- */

.stats{

    grid-area:stats;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

}

.stat-card{

    text-align:center;

}

.stat-card span{

    display:block;

    color:var(--muted);

    margin-bottom:10px;

}

.stat-card strong{

    font-size:1.6rem;

}

/* ------------------------------- */

.session-buttons{

    grid-area:buttons;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:16px;

}

.session-buttons button{

    border:none;

    border-radius:18px;

    padding:18px;

    font-size:1rem;

    font-weight:700;

    color:white;

    cursor:pointer;

    transition:.2s;

}

#startButton{

    background:var(--blue);

}

#breakButton{

    background:#d97706;

}

#resetButton{

    background:#4b5563;

}

.session-buttons button:hover{

    transform:translateY(-2px);

}

/* ------------------------------- */

.container.success{

    animation:success .35s ease;

}

@keyframes success{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.01);

    }

    100%{

        transform:scale(1);

    }

}

/* ------------------------------- */
/* Landscape tablet / phone */
/* ------------------------------- */

@media (max-width:1000px){

    .container{

        grid-template-columns:1fr;

        grid-template-areas:

            "header"
            "timer"
            "goal"
            "stats"
            "buttons";

    }

}

/* ------------------------------- */
/* Landscape phone */
/* ------------------------------- */

@media (max-width:900px) and (orientation:landscape){

    html,
    body{
        width:100%;
        height:100%;
        overflow:hidden;
    }

    .container{

        width:100%;

        height:100dvh;
        min-height:0;

        padding:
            10px
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));

        display:grid;

        grid-template-columns:1.15fr .85fr;

        grid-template-rows:
            auto
            minmax(0, 1fr)
            auto;

        grid-template-areas:

            "header header"
            "timer goal"
            "stats actions";

        gap:10px;

        overflow:hidden;

    }


    /* HEADER */

    .header{

        min-height:0;

        display:flex;
        align-items:center;

    }

    h1{

        font-size:1.7rem;
        line-height:1;

    }

    .status{

        margin-top:3px;

        font-size:.85rem;

    }


    /* TIMER */

    .timer-card{

        min-height:0;

        padding:14px;

        display:flex;
        flex-direction:column;
        justify-content:center;

        overflow:hidden;

    }

    .label{

        font-size:.9rem;

    }

    #timer{

        font-size:clamp(3.5rem,12vh,5rem);

        margin:10px 0;

    }

    #replyButton{

        margin-top:8px;

        padding:14px;

        font-size:1.05rem;

        border-radius:14px;

    }


    /* GOAL */

    .goal-card{

        min-height:0;

        padding:14px;

        overflow:hidden;

    }

    .goal{

        font-size:2.8rem;

        margin-bottom:10px;

        line-height:1;

    }

    .reply-grid{

        grid-template-columns:repeat(8,1fr);

        gap:6px;

    }

    .reply-cell{

        width:28px;
        height:28px;

        border-radius:8px;

        font-size:.7rem;

    }


    /* STATS */

    .stats{

        min-height:0;

        grid-area:stats;

        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:8px;

    }

    .stat-card{

        padding:10px;

        border-radius:12px;

    }

    .stat-card span{

        font-size:.65rem;

        margin-bottom:3px;

    }

    .stat-card strong{

        font-size:1rem;

    }


    /* ACTIONS */

    .session-buttons{

        grid-area:actions;

        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:8px;

    }

    .session-buttons button{

        padding:11px 8px;

        border-radius:12px;

        font-size:.75rem;

    }

}

/* ------------------------------- */
/* Portrait phone */
/* ------------------------------- */

@media (max-width:600px){

    .container{

        padding:14px;

        gap:16px;

    }

    h1{

        font-size:1.8rem;

    }

    .goal{

        font-size:3rem;

    }

    #timer{

        font-size:4rem;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .session-buttons{

        grid-template-columns:1fr;

    }

}