@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{

--bg:#F6F1EB;
--card:#FFFDFC;

--primary:#4E3728;
--primary-light:#8B6848;

--accent:#B78A52;

--text:#2B2522;
--text-soft:#7D7268;

--success:#5E8B63;
--danger:#A85757;

--border:rgba(78,55,40,.10);

}

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

body{

min-height:100vh;

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

background:
radial-gradient(
circle at top,
rgba(183,138,82,.10),
transparent 45%
),
linear-gradient(
180deg,
#FBF8F4,
#F6F1EB,
#EEE6DD
);

display:flex;
flex-direction:column;
align-items:center;

padding:20px;

color:var(--text);

overflow-x:hidden;

}

/* HEADER */

.brand{

display:flex;
flex-direction:column;
align-items:center;

margin-top:20px;
margin-bottom:28px;

}

.logo{

width:125px;
height:auto;
margin-bottom:12px;

}

.brand-text{

font-family:'Poppins',sans-serif;

font-size:58px;

font-weight:700;

letter-spacing:3px;

color:var(--primary);

line-height:1;

white-space:nowrap;

}

.brand-sub{

margin-top:10px;

font-size:13px;

letter-spacing:8px;

font-weight:600;

color:var(--accent);

text-transform:uppercase;

}

/* Difficulty */

.difficulty{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:rgba(183,138,82,.10);

border:1px solid rgba(183,138,82,.25);

color:var(--primary);

font-size:12px;

font-weight:700;

letter-spacing:1px;

}

/* Toast */

#toast{

position:fixed;

top:95px;

left:50%;

transform:
translateX(-50%)
translateY(-10px);

opacity:0;

background:#FFFDFB;

color:var(--text);

padding:13px 22px;

border-radius:999px;

font-size:13px;

border:1px solid var(--border);

backdrop-filter:blur(18px);

transition:.3s;

z-index:999;

}

#toast.show{

opacity:1;

transform:
translateX(-50%)
translateY(0);

}

/* Card */

#app{

width:100%;
max-width:540px;

background:rgba(255,253,252,.92);

border:1px solid var(--border);

border-radius:30px;

padding:34px;

backdrop-filter:blur(20px);

box-shadow:
0 15px 45px rgba(40,30,20,.08);

}

/* TEXT */

h2{

font-size:34px;

font-weight:700;

text-align:center;

margin-bottom:14px;

color:var(--primary);

}

h3{

font-size:30px;

font-weight:600;

line-height:1.45;

margin-bottom:28px;

text-align:center;

color:var(--text);

}

p{

font-size:15px;

line-height:1.8;

color:var(--text-soft);

text-align:center;

}

/* INPUT */

input{

width:100%;

padding:18px;

margin-top:15px;

background:#F8F4EF;

border:1px solid var(--border);

border-radius:18px;

outline:none;

color:var(--text);

font-size:15px;

transition:.25s;

}

input:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(78,55,40,.08);

}

/* BUTTON */

button{

width:100%;

padding:18px;

margin-top:12px;

background:#F5F0E9;

border:1px solid rgba(78,55,40,.10);

border-radius:18px;

color:var(--text);

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.25s;

}

button:hover{

background:#ECE3D7;

border-color:var(--accent);

transform:translateY(-2px);

box-shadow:0 8px 24px rgba(183,138,82,.12);

}

button:active{

transform:scale(.98);

}

/* Answers */

.correct{

background:var(--success)!important;
border:none!important;
color:white;

}

.wrong{

background:var(--danger)!important;
border:none!important;
color:white;

}

/* Progress */

.progress-text{

font-size:13px;

color:var(--text-soft);

margin-bottom:12px;

text-align:center;

}

.progress-bar{

height:9px;

background:#E8DDD2;

border-radius:999px;

overflow:hidden;

margin-bottom:28px;

}

.progress-fill{

height:100%;

background:linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);

border-radius:999px;

transition:.5s;

}

/* Reward */

.reward{

font-size:40px;

font-weight:700;

font-family:'Poppins',sans-serif;

color:var(--primary);

text-align:center;

margin:16px 0;

}

#timer{

font-size:28px;

font-weight:700;

text-align:center;

margin-top:16px;

color:var(--primary);

}

.result-time{

font-size:11px;

text-align:right;

margin-top:16px;

color:var(--text-soft);

}

/* Mobile */

@media(max-width:480px){

.logo{

width:105px;

}

.brand-text{

font-size:44px;

letter-spacing:2px;

}

.brand-sub{

font-size:11px;

letter-spacing:6px;

}

#app{

padding:24px;

}

h2{

font-size:26px;

}

h3{

font-size:22px;

}

}