/* ========================================
   RESET
======================================== */

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

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:#f4f7f6;
    color:#333;
    line-height:1.5;
    -webkit-tap-highlight-color:transparent;
}

/* ========================================
   VARIABLES
======================================== */

:root{

    --primary:#2A9D8F;
    --secondary:#264653;

    --success:#28a745;
    --warning:#ffc107;
    --danger:#dc3545;

    --white:#ffffff;
    --black:#000000;

    --radius:12px;

}

/* ========================================
   LAYOUT
======================================== */

.container{
    width:100%;
    max-width:480px;
    margin:auto;
    min-height:100vh;
    padding:20px;
}

/* ========================================
   BUTTON
======================================== */

.btn{

    width:100%;
    padding:14px;

    border:none;
    border-radius:var(--radius);

    font-size:16px;
    font-weight:bold;

    cursor:pointer;

}

.btn:active{

    transform:scale(.98);

}

.btn-primary{

    background:var(--primary);
    color:white;

}

.btn-secondary{

    background:var(--secondary);
    color:white;

}

.btn-danger{

    background:var(--danger);
    color:white;

}

/* ========================================
   CARD
======================================== */

.card{

    background:white;

    border-radius:var(--radius);

    padding:16px;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

/* ========================================
   INPUT
======================================== */

.input{

    width:100%;

    padding:12px;

    border:2px solid #ddd;

    border-radius:var(--radius);

    font-size:16px;

}

/* ========================================
   TIMER
======================================== */

.timer{

    font-size:22px;

    font-weight:bold;

    color:var(--secondary);

    text-align:center;

}

/* ========================================
   SCORE
======================================== */

.score{

    font-size:20px;

    font-weight:bold;

    text-align:center;

}

/* ========================================
   MODAL
======================================== */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

}

.modal.hidden{

    display:none;

}

.modal-content{

    width:90%;

    max-width:420px;

    background:white;

    border-radius:16px;

    padding:20px;

}

/* ========================================
   UTILITIES
======================================== */

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.hidden{

    display:none!important;

}

/* ========================================
   ICON BUTTON
======================================== */

.icon-btn{

    width:44px;
    height:44px;

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

    border:none;
    border-radius:50%;

    background:var(--secondary);
    color:#fff;

    font-size:20px;
    cursor:pointer;

    transition:.2s;

}

.icon-btn:hover{

    opacity:.9;

}

.icon-btn:active{

    transform:scale(.95);

}